<!doctype html>
<!--

-->
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A portfolio template that uses Material Design Lite.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>MDL-Static Website</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-pink.min.css" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header mdl-layout__header--waterfall portfolio-header">
            <div class="mdl-layout__header-row portfolio-logo-row">
                <span class="mdl-layout__title">
                    <div class="portfolio-logo"></div>
                    <span class="mdl-layout__title">专注于音乐的匿名社交软件</span>
                </span>
            </div>
            <div class="mdl-layout__header-row portfolio-navigation-row mdl-layout--large-screen-only">
                <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                    <a class="mdl-navigation__link is-active" href="index.html">来一发吧</a><!--首页-->
                    <a class="mdl-navigation__link" href="blog.html">墙上了</a><!--新闻/动态-->
                    <a class="mdl-navigation__link" href="about.html">好湿</a><!--关于我们-->
                    <a class="mdl-navigation__link" href="contact.html">给我</a><!--贡献-->
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer mdl-layout--small-screen-only">
            <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                <a class="mdl-navigation__link is-active" href="index.html">Portfolio</a>
                <a class="mdl-navigation__link" href="blog.html">Blog</a>
                <a class="mdl-navigation__link" href="about.html">About</a>
                <a class="mdl-navigation__link" href="contact.html">Contact</a>
            </nav>
        </div>


        <main class="mdl-layout__content">

            <div class="mdl-grid portfolio-max-width">
                <div class="mdl-grid mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-card mdl-shadow--4dp">
                    <div class="mdl-card__media mdl-cell mdl-cell--12-col-tablet">
                        <img class="article-image" src=" images/example-blog01.jpg" border="0" alt="">
                    </div>
                    <div class="mdl-cell mdl-cell--8-col">
                        <h2 class="mdl-card__title-text">~~What?啪啪呀~~</h2>
                        <div class="mdl-card__supporting-text padding-top">
                            <span>2017/12/25 </span>
                            <div id="tt1" class=" icon material-icons portfolio-share-btn">share</div>
                            <div class="mdl-tooltip" for="tt1">
                                功能,等你来草
                            </div>
                        </div>
                        <div class="mdl-card__supporting-text no-left-padding">
                            <p>(啪啪呀)Papaya，是一款匿名的聊天软件，支持windows、android、ios等平台。
                            她使用 Apache License v2.0 开源许可。
                            更小的程序大小，简约的设计，尊重用户隐私。
                            基于强大的Scintilla编辑组件，Notepad ++以C ++编写，使用纯Win32 API和STL，可确保更高的执行速度和更小的程序大小。</p>
                            
                            <span>Category: <a href="#">Latest</a></span>
                        </div>
                    </div>
                </div>



                <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-card mdl-shadow--4dp">
                    <div class="mdl-card__title">
                        <h2 class="mdl-card__title-text">技师的服务好不好</h2>
                    </div>
                    <div class="mdl-card__media">
                        <a href="#"> <img class="article-image" src=" images/example-blog02.jpg" border="0" alt=""></a>
                    </div>
                    <div class="mdl-card__supporting-text no-bottom-padding">
                        <span>Posted 2 days ago</span>
                        <div id="tt2" class=" icon material-icons portfolio-share-btn">share</div>
                        <div class="mdl-tooltip" for="tt2">
                            Share via social media
                        </div>
                    </div>
                    <div class="mdl-card__supporting-text">
                        <p>Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in.</p>
                    </div>
                </div>
                <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-card mdl-card mdl-shadow--4dp portfolio-blog-card-full-bg  ">
                    <div class="mdl-card__title mdl-card--expand "></div>
                    <div class="mdl-card__actions">
                        <span class="demo-card-image__filename">Pamukkale.jpg</span>
                    </div>
                </div>
                <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-card mdl-shadow--4dp ">
                    <div class="mdl-card__media">
                        <a href="#"> <img class="article-image" src=" images/example-blog04.jpg" border="0" alt=""></a>
                    </div>
                    <div class="mdl-card__supporting-text">
                        <small>Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit.</small>
                    </div>
                    <div class="mdl-card__supporting-text">
                        <p>Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam.</p>
                    </div>
                </div>
                <div class="demo-card-event mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-card mdl-card mdl-shadow--4dp portfolio-blog-card-event-bg mdl-color-text--white">
                    <div class="mdl-card__title mdl-card--expand">
                        <h4 class="mdl-color-text--white">
                          Conference event:<br>
                          May 24, 2016<br>
                          7-11pm
                        </h4>
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                          Add to Calendar
                        </a>
                        <div class="mdl-layout-spacer"></div>
                        <i class="material-icons ">event</i>
                    </div>
                </div>
                <div class="mdl-cell mdl-cell--5-col mdl-cell--4-col-tablet mdl-card  mdl-card mdl-shadow--4dp">
                    <div class="mdl-card__title mdl-card--expand portfolio-blog-card-strip-bg mdl-color-text--white">
                        <h2 class="mdl-card__title-text">adipiscing</h2>
                    </div>
                    <div class="mdl-card__supporting-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent">
                          View Updates
                        </a>
                    </div>
                </div>
                <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-card  mdl-card mdl-shadow--4dp portfolio-blog-card-compact">
                    <div class="mdl-card__media">
                        <img class="article-image" src=" images/example-blog07.jpg" border="0" alt="">
                    </div>
                    <div class="mdl-card__title ">
                        <h2 class="mdl-card__title-text">做爱做的事</h2>
                    </div>
                    <div class="mdl-card__supporting-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
                    </div>
                    <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent">
                          View Updates
                        </a>
                    </div>
                </div>
            </div>
            <footer class="mdl-mini-footer">
                <div class="mdl-mini-footer__left-section">
                    <div class="mdl-logo">Simple portfolio website</div>
                </div>
                <div class="mdl-mini-footer__right-section">
                    <ul class="mdl-mini-footer__link-list">
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Privacy & Terms</a></li>
                    </ul>
                </div>
            </footer>
        </main>
    </div>
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>

</html>
